<template>
	<view class="tabs u-f u-f-ac" ref="tabs" id='tabs'>
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
		    <view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="toIndex(index)"  :style="scrollItemstyle">
		        <view class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}} {{tab.num? tab.num:''}}
					<view class="line">
					</view> 
				</view>
		    </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		props:{
			tabBars:Array,
			scrollItemstyle:{
				type:String,
				default:''
			},
			scrollStyle:{
				type:String,
				default:''
			},
			tabIndex : Number
		},
		methods:{
			toIndex(index){ 
				console.log(index)
				this.$emit('toIndex',index)
			}
		}
	}
</script>

<style scoped>
	page {
	    width: 100%;
	    min-height: 100%;
	    display: flex;
	}
	
	
	.tabs {
		/* position: fixed; */
		left:0;
		top:0;
		z-index: 99;
	    flex: 1;
	    flex-direction: column;
	    overflow: hidden;
	    background-color: #ffffff;
	}
	
	.scroll-h {
	    width: 750upx;
	    height: 90upx;
	    flex-direction: row;
	    white-space: nowrap;
	}
	
	.line-h {
	    height: 1upx;
	    background-color: #cccccc;
	}
	
	.uni-tab-item {
	    display: inline-block;
	    flex-wrap: nowrap;
	   /* padding-left: 34upx;
	    padding-right: 34upx; */
		text-align: center;
	}
	
	.uni-tab-item-title {
	    color: #666;
	    font-size: 30upx;
	    height: 50upx;
	    line-height: 50upx;
	    flex-wrap: nowrap;
	    white-space: nowrap;
		font-weight: 700;
	}
	
	.uni-tab-item-title-active {
	    color: #000;
	}
	.uni-tab-item-title-active .line{
		width:60upx;
		height:16upx;
		margin: 0 auto;
		background: #FEE42B;
		border-radius: 20upx;
	}
</style>
